<template>
  <div class="login_container">
    <el-dialog v-model="userStore.visiable" title="用户登录" ref="dialog">
      <!-- 对话框身体部分的结构 -->
      <el-row>
        <!-- 左侧结构：手机号登录、微信扫一扫登录 -->
        <el-col :span="12">
          <div class="login">
            <div v-show="scene == 0">
              <el-form :model="loginParam" :rules="rules" ref="form">
                <el-form-item prop="phone">
                  <el-input
                    placeholder="请输入手机号码"
                    :prefix-icon="User"
                    v-model="loginParam.phone"
                  ></el-input>
                </el-form-item>
                <el-form-item prop="code">
                  <el-input
                    placeholder="请输入手机验证码"
                    :prefix-icon="Lock"
                    v-model="loginParam.code"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button :disabled="!isPhone || flag ? true : false">
                    <CountDown v-if="flag" :flag="flag" @getFlag="getFlag" />
                    <span v-else @click="getCode">获取验证码</span>
                  </el-button>
                </el-form-item>
              </el-form>
              <el-button
                style="width: 100%"
                type="primary"
                size="default"
                :disabled="
                  !isPhone || loginParam.code.length < 6 ? true : false
                "
                @click="login"
                >用户登录</el-button
              >
              <div class="bottom" @click="changeScene">
                <p>微信扫码登录</p>
                <svg
                  t="1726627743082"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1529"
                  width="32"
                  height="32"
                >
                  <path
                    d="M696.32 552.96c11.301926 0 20.48-9.178074 20.48-20.48 0-11.320889-9.178074-20.48-20.48-20.48s-20.48 9.178074-20.48 20.48S685.018074 552.96 696.32 552.96zM573.44 552.96c11.301926 0 20.48-9.178074 20.48-20.48 0-11.320889-9.178074-20.48-20.48-20.48s-20.48 9.178074-20.48 20.48S562.138074 552.96 573.44 552.96zM501.76 409.6c16.952889 0 30.72-13.748148 30.72-30.72s-13.767111-30.72-30.72-30.72c-16.952889 0-30.72 13.748148-30.72 30.72C471.04 395.851852 484.807111 409.6 501.76 409.6zM337.92 409.6c16.952889 0 30.72-13.748148 30.72-30.72s-13.767111-30.72-30.72-30.72c-16.952889 0-30.72 13.748148-30.72 30.72C307.2 395.851852 320.967111 409.6 337.92 409.6zM512 1024c282.775704 0 512-229.224296 512-512S794.775704 0 512 0 0 229.224296 0 512 229.224296 1024 512 1024zM451.716741 610.986667c-10.353778 1.441185-21.010963 2.180741-31.857778 2.180741-27.154963 0-53.020444-4.664889-76.515556-13.103407-2.332444-0.83437-10.695111-3.356444-15.208296 0-10.164148 7.547259-23.798519 23.248593-23.798519 23.248593s5.006222-11.415704 6.674963-28.103111c0.758519-7.623111-10.865778-12.970667-13.198222-14.52563-44.240593-29.923556-72.533333-79.36-72.533333-130.730667 0-90.149926 87.096889-163.233185 194.56-163.233185 100.333037 0 182.916741 63.696593 193.422222 145.521778-92.311704 12.743111-162.721185 79.928889-162.721185 160.919704C450.56 599.191704 450.939259 605.127111 451.716741 610.986667zM462.468741 649.500444c-13.824 2.180741-28.084148 3.318519-42.628741 3.318519-29.070222 0-56.869926-4.551111-82.583704-12.856889-12.932741-4.171852-60.150519 45.264593-71.888593 39.272296-6.97837-3.565037 21.086815-62.027852 14.601481-66.180741-58.04563-37.072593-95.668148-96.616296-95.668148-163.764148 0-112.412444 105.453037-203.529481 235.52-203.529481 122.652444 0 223.402667 81.009778 234.496 184.490667 103.177481 4.039111 185.344 75.434667 185.344 162.910815 0 54.328889-31.687111 102.437926-80.421926 132.096-9.178074 5.575111 19.892148 52.641185 9.576296 56.832-6.33363 2.578963-51.693037-37.262222-58.405926-35.252148-20.423111 6.106074-42.401185 9.424593-65.308444 9.424593C561.284741 756.242963 489.832296 711.793778 462.468741 649.500444z"
                    fill="#33CC00"
                    p-id="1530"
                  ></path>
                </svg>
              </div>
            </div>
            <div class="wechat" v-show="scene == 1">
              <!-- 在这个容器当中显示微信扫码登录的页面 -->
              <div id="login_container"></div>
              <div class="phone" @click="handler">
                <p>手机短信验证码登录</p>
                <svg
                  t="1726670020999"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4399"
                  width="16"
                  height="16"
                >
                  <path
                    d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                    p-id="4400"
                    fill="#d81e06"
                  ></path>
                </svg>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="leftContent">
            <div class="top">
              <div class="item">
                <img src="../../assets/images/code_app.png" alt="" />
                <svg
                  t="1726628920509"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5054"
                  width="16"
                  height="16"
                >
                  <path
                    d="M696.32 552.96c11.301926 0 20.48-9.178074 20.48-20.48 0-11.320889-9.178074-20.48-20.48-20.48s-20.48 9.178074-20.48 20.48S685.018074 552.96 696.32 552.96zM573.44 552.96c11.301926 0 20.48-9.178074 20.48-20.48 0-11.320889-9.178074-20.48-20.48-20.48s-20.48 9.178074-20.48 20.48S562.138074 552.96 573.44 552.96zM501.76 409.6c16.952889 0 30.72-13.748148 30.72-30.72s-13.767111-30.72-30.72-30.72c-16.952889 0-30.72 13.748148-30.72 30.72C471.04 395.851852 484.807111 409.6 501.76 409.6zM337.92 409.6c16.952889 0 30.72-13.748148 30.72-30.72s-13.767111-30.72-30.72-30.72c-16.952889 0-30.72 13.748148-30.72 30.72C307.2 395.851852 320.967111 409.6 337.92 409.6zM512 1024c282.775704 0 512-229.224296 512-512S794.775704 0 512 0 0 229.224296 0 512 229.224296 1024 512 1024zM451.716741 610.986667c-10.353778 1.441185-21.010963 2.180741-31.857778 2.180741-27.154963 0-53.020444-4.664889-76.515556-13.103407-2.332444-0.83437-10.695111-3.356444-15.208296 0-10.164148 7.547259-23.798519 23.248593-23.798519 23.248593s5.006222-11.415704 6.674963-28.103111c0.758519-7.623111-10.865778-12.970667-13.198222-14.52563-44.240593-29.923556-72.533333-79.36-72.533333-130.730667 0-90.149926 87.096889-163.233185 194.56-163.233185 100.333037 0 182.916741 63.696593 193.422222 145.521778-92.311704 12.743111-162.721185 79.928889-162.721185 160.919704C450.56 599.191704 450.939259 605.127111 451.716741 610.986667zM462.468741 649.500444c-13.824 2.180741-28.084148 3.318519-42.628741 3.318519-29.070222 0-56.869926-4.551111-82.583704-12.856889-12.932741-4.171852-60.150519 45.264593-71.888593 39.272296-6.97837-3.565037 21.086815-62.027852 14.601481-66.180741-58.04563-37.072593-95.668148-96.616296-95.668148-163.764148 0-112.412444 105.453037-203.529481 235.52-203.529481 122.652444 0 223.402667 81.009778 234.496 184.490667 103.177481 4.039111 185.344 75.434667 185.344 162.910815 0 54.328889-31.687111 102.437926-80.421926 132.096-9.178074 5.575111 19.892148 52.641185 9.576296 56.832-6.33363 2.578963-51.693037-37.262222-58.405926-35.252148-20.423111 6.106074-42.401185 9.424593-65.308444 9.424593C561.284741 756.242963 489.832296 711.793778 462.468741 649.500444z"
                    fill="#33CC00"
                    p-id="5055"
                  ></path>
                </svg>
                <p>微信扫一扫关注</p>
                <p>“快速预约挂号”</p>
              </div>
              <div class="item">
                <img src="../../assets/images/code_app.png" alt="" />
                <svg
                  t="1726628123414"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3928"
                  width="16"
                  height="16"
                >
                  <path
                    d="M512.3072 883.3024c-41.2672 0-74.8544-33.5872-74.8544-74.8544s33.5872-74.8544 74.8544-74.8544 74.8544 33.5872 74.8544 74.8544S553.5744 883.3024 512.3072 883.3024zM512.3072 770.4576c-20.992 0-37.9904 16.9984-37.9904 37.9904s16.9984 37.9904 37.9904 37.9904 37.9904-16.9984 37.9904-37.9904S533.1968 770.4576 512.3072 770.4576z"
                    fill="#FF9000"
                    p-id="3929"
                  ></path>
                  <path
                    d="M680.1408 991.9488c-3.1744 0-6.4512-0.8192-9.4208-2.56-41.2672-24.4736-108.032-24.3712-108.7488-24.3712 0 0-0.1024 0-0.1024 0L276.8896 965.0176c-54.3744 0-98.5088-44.2368-98.5088-98.5088L178.3808 140.3904c0-54.3744 44.2368-98.5088 98.5088-98.5088l470.7328 0c54.3744 0 98.5088 44.2368 98.5088 98.5088l0 726.1184c0 54.3744-44.2368 98.5088-98.5088 98.5088-10.1376 0-18.432-8.2944-18.432-18.432s8.2944-18.432 18.432-18.432c33.9968 0 61.6448-27.648 61.6448-61.6448L809.2672 140.3904c0-33.9968-27.648-61.6448-61.6448-61.6448L276.8896 78.7456c-33.9968 0-61.6448 27.648-61.6448 61.6448l0 726.1184c0 33.9968 27.648 61.6448 61.6448 61.6448l284.8768 0c4.1984 0 78.0288-0.1024 127.7952 29.4912 8.704 5.2224 11.6736 16.4864 6.4512 25.2928C692.5312 988.7744 686.4896 991.9488 680.1408 991.9488z"
                    fill="#FF9000"
                    p-id="3930"
                  ></path>
                  <path
                    d="M589.824 149.7088 434.7904 149.7088c-10.1376 0-18.432-8.2944-18.432-18.432s8.2944-18.432 18.432-18.432L589.824 112.8448c10.1376 0 18.432 8.2944 18.432 18.432S599.9616 149.7088 589.824 149.7088z"
                    fill="#FF9000"
                    p-id="3931"
                  ></path>
                  <path
                    d="M705.024 230.0928c9.728 0 17.7152 7.8848 17.7152 17.7152l0 376.9344c0 9.728-7.8848 17.7152-17.7152 17.7152L319.5904 642.4576c-9.728 0-17.7152-7.8848-17.7152-17.7152L301.8752 247.808c0-9.728 7.8848-17.7152 17.7152-17.7152L705.024 230.0928M705.024 193.2288 319.5904 193.2288c-30.1056 0-54.5792 24.4736-54.5792 54.5792l0 376.9344c0 30.1056 24.4736 54.5792 54.5792 54.5792l385.4336 0c30.1056 0 54.5792-24.4736 54.5792-54.5792L759.6032 247.808C759.6032 217.7024 735.1296 193.2288 705.024 193.2288L705.024 193.2288z"
                    fill="#FF9000"
                    p-id="3932"
                  ></path>
                </svg>
                <p>扫一扫下载</p>
                <p>“预约挂号”APP</p>
              </div>
            </div>
          </div>
          <p class="tip">尚医通指定平台</p>
          <p class="tip">快速挂号 安全放心</p>
        </el-col>
      </el-row>

      <template #footer>
        <el-button type="primary" size="default" @click="closeDialog"
          >关闭窗口</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
//引入wx扫码登录参数请求
import { reqWxLogin } from "@/api/hospital";
//引入倒计时组件
import CountDown from "@/components/countdown/index.vue";
import { ref, reactive, computed, watch } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import type { WXLoginResponseData } from "@/api/hospital/type";
import { useRoute, useRouter } from "vue-router";
//获取user仓库的数据( visiable)可以控制login组件的对话框显示与隐藏
import useUserStore from "@/store/modules/user";
import { ElMessage } from "element-plus";
let $route = useRoute();
let $router = useRouter();
let userStore = useUserStore();
//定义一个响应式数据控制倒计时组件显示与隐藏
let flag = ref<boolean>(false); //flag为true时，开启倒计时，flag为false时并非倒计时
let scene = ref<number>(0); //0代表手机号登录 1代表微信扫码登录
//获取form组件实例
let form = ref<any>();
//收集表单数据---手机号码
let loginParam = reactive({
  phone: "", //收集手机号码
  code: "", //收集验证码
});
//计算出当前表单元素收集的内容是否是手机号码格式
let isPhone = computed(() => {
  //手机号码正则表达式
  const reg =
    /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
  //返回布尔值:真代表手机号码、假代表的即为不是手机号码
  return reg.test(loginParam.phone);
});
//点击微信扫码登录|微信小图标切换为微信扫码登录
const changeScene = async () => {
  //切换场景为1：微信扫码登录
  scene.value = 1;
  /*
   发请求获取微信扫码二维码所需要的参数
   向尚医通后台服务器发请求，获取微信扫码登录页面参数
   还需要携带一个参数：告诉尚医通后台服务器用户授权成功以后重定向到项目上的某一个页面
   */
  let redirect_URL = encodeURIComponent(window.location.origin + "/wxlogin");
  let result: WXLoginResponseData = await reqWxLogin(redirect_URL);
  //console.log('result', result)//{"code": 200,"message": "成功","data": {"redirectUri": "http%3A%2F%2Fforum.atguigu.cn%2Fapi%2FweixinPc%2Fcallback","appid": "wx14659ebc7aa061f6","scope": "snsapi_login","state": "syt-http://127.0.0.1:5173/wxlogin"},"ok": true}
  //生成微信扫码登录二维码页面
  //@ts-ignore
  var obj = new WxLogin({
    self_redirect: true, //true：手机点击确认登录后可以在iframe内跳转到redirect_uri
    id: "login_container", //显示二维码容器的id
    appid: result.data.appid, //应用的唯一标识appid（由后端提供）
    scope: "snsapi_login", //代表微信扫码登录页面已经授权了
    redirect_uri: result.data.redirectUri, //填写授权回调域路径，就是用户授权成功以后，微信服务器向尚医通后台推送code的地址
    state: result.data.state, //state就是尚医通服务器重定向的地址，且携带用户信息（由后端提供）
    style: "black",
    href: "",
  });
};
//获取验证码按钮的回调
const getCode = async () => {
  if (!isPhone.value || flag.value) return;
  //开启倒计时组件，倒计时组件显示出来
  flag.value = true;
  //通知pinia仓库存储验证码
  try {
    //获取验证码成功
    await userStore.getCode(loginParam.phone);
    loginParam.code = userStore.code;
  } catch (error) {
    //获取验证码失败
    ElMessage({
      type: "error",
      message: (error as Error).message,
    });
  }
};

// 计算器子组件绑定的自定义事件:当倒计时为零的时候，通知父组件倒计时组件隐藏
const getFlag = (val: boolean) => {
  flag.value = val;
};

//点击用户登录按钮的回调
const login = async () => {
  //保证表单校验两项都符合条件
  await form.value.validate();
  //发起登录请求
  //登录请求成功：顶部组件需要展示用户名字、对话框关闭
  //登录请求失败：弹出对应登录失败的错误提示信息
  try {
    //用户登录成功
    await userStore.userLogin(loginParam);
    //关闭对话框
    userStore.visiable = false;
    //获取url的query参数
    let redirect = $route.query.redirect;
    if (redirect) {
      $router.push(redirect as string);
    } else {
      //跳转到首页
      $router.push("/home");
    }
  } catch (error) {
    ElMessage({
      type: "error",
      message: (error as Error).message,
    });
  }
};

//自定义校验规则：手机号码自定义校验规则
const validatePhone = (rule: any, value: any, callBack: any) => {
  //rule:即为表单校验规则对象
  //value:即为当前表单元素收集的文本内容
  //callBack:回调函数
  const reg =
    /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
  if (reg.test(value)) {
    callBack();
  } else {
    callBack(new Error("请输入正确的手机号码格式"));
  }
};
//验证码自定义校验规则
const validateCode = (rule: any, value: any, callBack: any) => {
  if (/^\d{6}$/.test(value)) {
    callBack();
  } else {
    callBack(new Error("请输入正确的验证码"));
  }
};

//表单校验的规则对象
const rules = {
  // 手机号码校验规则
  //required：代表当前字段务必进行校验
  //message：代表校验错误的提示信息
  //trigger：代表表单校验触发的时机 change：文本发生变化的时候进行校验 blur：失去焦点的时候进行校验
  //min：代表当前字段的最小长度
  //max：代表当前字段的最大长度
  // phone: [
  //   { required: true, message: "手机号码务必11位", trigger: "change", min: 11 },
  // ],
  // code: [{ required: true, message: "验证码务必6位", trigger: "blur", min: 6 }],

  phone: [{ trigger: "change", validator: validatePhone }],
  code: [{ trigger: "change", validator: validateCode }],
};

//关闭窗口按钮的回调
const closeDialog = () => {
  userStore.visiable = false;
};

//点击手机短信验证码盒子的回调
const handler = () => {
  scene.value = 0;
};

//监听场景的数据
watch(
  () => scene.value,
  (val: number) => {
    if (val === 1) {
      userStore.queryState();
    }
  }
);
</script>
<script lang="ts">
export default {
  name: "Login",
};
</script>

<style scoped lang="scss">
.login_container {
  ::v-deep(.el-dialog__body) {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .login {
    padding: 20px;
    border: 1px solid #ccc;
    .wechat {
      display: flex;
      flex-direction: column;
      align-items: center;
      .phone {
        display: flex;
        flex-direction: column;
        align-items: center;
        p {
          margin: 10px 0px;
        }
      }
    }
  }
  .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    p {
      margin: 10px 0px;
    }
  }
  .leftContent {
    .top {
      display: flex;
      justify-content: space-around;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 130px;
          height: 130px;
        }
        p {
          margin: 5px 0px;
        }
      }
    }
  }

  .tip {
    text-align: center;
    margin: 20px 0px;
    font-size: 20px;
    font-weight: 900;
  }
}
</style>